<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card v-if="parentQuestion.id" class="box-card">
          <div slot="header" class="clearfix">
            <span>
              主题目
              <el-tag effect="dark" size="mini">{{
                parentQuestion.name
                  ? parentQuestion.name
                  : questionType[parentQuestion.type]
              }}</el-tag>
            </span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="goBack()"
              >返回主题目</el-button
            >
          </div>
          <div style="width: 90%; margin-left: 5%; margin-top: 5px">
            <katex
              :katex-content="parentQuestion.title"
              index="parentQuestionTitle"
            />
          </div>
          <div style="width: 90%; margin-left: 5%; margin-top: 5px">
            <katex
              :katex-content="parentQuestion.materials"
              index="parentQuestionMaterials"
            />
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-row
              v-if="question.id && !test.id"
              :gutter="20"
              class="cardHeader"
              style="display: flex"
            >
              <el-col style="flex: 1" />
              <el-col
                v-if="question.id && isSample=='1'"
                class="cardHeader"
                style="width: 250px; margin-top: 4px"
              >
                <el-button
                  :disabled="questionUpDisabled"
                  size="mini"
                  class="flbtn"
                  icon="el-icon-arrow-up"
                  circle
                  @click="questionUp"
                />
                <el-button
                  :disabled="questionDownDisabled"
                  size="mini"
                  class="flbtn"
                  icon="el-icon-arrow-down"
                  circle
                  @click="questionDown"
                />
              </el-col>
            </el-row>
            <el-row :gutter="20" class="cardHeader" style="display: flex">
              <el-col style="flex: 1" />
              <el-col class="cardHeader" style="width: 250px; margin-top: 4px">
                <span v-if="status&&isSample=='1'">
                  <el-button
                    class="flbtn"
                    type="danger"
                    size="small"
                    @click="checking(2)"
                    >不合格</el-button
                  >
                  <el-button
                    class="flbtn"
                    size="small"
                    type="primary"
                    @click="checking(1)"
                    >合格</el-button
                  >
                </span>
              </el-col>
            </el-row>
          </div>
          <div class="content">
            <el-form
              ref="question"
              :rules="rules"
              :model="question"
              label-width="100px"
            >
              <el-form-item label="科目" prop="subjectId">
                <el-select
                  v-model="question.subjectId"
                  :disabled="readonly"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="subject in subjects"
                    :key="subject.id"
                    :label="subject.name"
                    :value="subject.id"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="题目" prop="title">
                <myEdit :disabled="readonly" v-model="question.title" />
              </el-form-item>

              <el-form-item
                v-if="beSimilarQuestion && beSimilarQuestion.length > 0"
                label="相似题目"
              >
                <div
                  v-for="beSimilar in beSimilarQuestion"
                  :key="beSimilar.id"
                  class="likeQuestion"
                >
                  <el-card
                    class="box-card"
                    style="
                      float: left;
                      width: 300px;
                      height: 300px;
                      overflow-y: auto;
                    "
                  >
                    <div slot="header" class="clearfix">
                      <el-link
                        type="primary"
                        style="float: right; padding: 3px 0"
                        @click="show(beSimilar.id)"
                        >预览</el-link
                      >
                      <el-link
                        type="success"
                        style="float: right; padding: 3px 0; right: 20px"
                        @click="showQuestion(beSimilar.id)"
                        >查看</el-link
                      >
                    </div>
                    <span v-html="beSimilar.name" />
                  </el-card>
                </div>
              </el-form-item>
              <el-form-item label="材料">
                <myEdit
                  :disabled="readonly"
                  v-model="question.materials"
                  placeholder="如果存在材料,需填写材料"
                />
              </el-form-item>
              <el-form-item label="题目类型">
                <el-select
                  :disabled="readonly"
                  v-model="question.type"
                  size="mini"
                  placeholder="请选择题目类型"
                >
                  <el-option
                    v-for="(key, value) in questionType"
                    :key="key"
                    :label="key"
                    :value="value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="题目类型别名">
                <el-input
                  :disabled="readonly"
                  v-model="question.name"
                  :placeholder="typeName"
                  size="mini"
                />
              </el-form-item>
              <template>
                <el-form-item label="是否真题">
                  <el-switch
                    :disabled="readonly"
                    v-model="question.isOfficialQuestion"
                    :active-value="1"
                    :inactive-value="0"
                  />
                </el-form-item>
                <el-form-item
                  v-if="question.isOfficialQuestion"
                  label="真题出处"
                >
                  <el-input
                    :disabled="readonly"
                    v-model="question.officialQuestionSource"
                    placeholder="真题名称"
                    size="mini"
                  />
                </el-form-item>
                <el-form-item
                  v-if="question.isOfficialQuestion"
                  label="真题年份"
                >
                  <el-date-picker
                    :disabled="readonly"
                    v-model="question.year"
                    size="mini"
                    value-format="yyyy"
                    type="year"
                    placeholder="选择年份"
                  />
                </el-form-item>
              </template>
              <el-form-item
                v-if="
                  question.type === '1' ||
                  question.type === '2' ||
                  question.type === '3'
                "
                label="答案"
              >
                <el-checkbox-group
                  :disabled="readonly"
                  v-model="question.answer"
                  @change="handleAnswer"
                >
                  <div v-for="item in question.select" :key="item.select">
                    <el-checkbox :label="item.select">
                      <el-select
                        :disabled="readonly"
                        v-model="item.select"
                        style="width: 65px"
                        size="small"
                        placeholder
                      >
                        <el-option
                          v-for="item in selectNotUse"
                          :key="item"
                          :label="item"
                          :value="item"
                        />
                      </el-select>
                      <myEdit
                        :disabled="readonly"
                        v-model="item.content"
                        :inline="true"
                        :use-dialog="true"
                        size="small"
                      />
                      <el-link
                        :disabled="readonly"
                        :underline="false"
                        icon="el-icon-error"
                        type="danger"
                        @click="removeItem(item)"
                      />
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
                <el-checkbox v-if="!readonly" disabled>
                  <el-select
                    v-model="newSelect.select"
                    style="width: 65px"
                    size="small"
                    placeholder
                  >
                    <el-option
                      v-for="item in selectNotUse"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                  <myEdit
                    :disabled="readonly"
                    v-model="newSelect.content"
                    :inline="true"
                    :use-dialog="true"
                    size="small"
                  />
                  <el-link
                    :underline="false"
                    icon="el-icon-circle-plus"
                    type="primary"
                    @click="addItem"
                  />
                </el-checkbox>
              </el-form-item>
              <el-form-item
                v-else-if="
                  question.type === '5' ||
                  question.type === '6' ||
                  question.type === '7'
                "
                label="答案"
              >
                <myEdit :disabled="readonly" v-model="question.answer[0]" />
              </el-form-item>
              <div
                v-if="
                  question.type === '1' ||
                  question.type === '2' ||
                  question.type === '3' ||
                  question.type === '5' ||
                  question.type === '6' ||
                  question.type === '7'
                "
              >
                <el-form-item label="解析">
                  <myEdit :disabled="readonly" v-model="question.analyze" />
                </el-form-item>
                <el-form-item label="视频解析">
                  <el-upload
                    v-if="videoUploadStatus === 0"
                    :disabled="readonly"
                    :show-file-list="false"
                    drag
                    action
                  >
                    <i class="el-icon-upload" />
                    <div class="el-upload__text">
                      将视频拖到此处，或
                      <em>点击上传</em>
                    </div>
                  </el-upload>
                  <div class="progress">
                    <el-progress
                      v-if="videoUploadStatus === 1"
                      :percentage="percentage"
                      :color="customColorMethod"
                    />
                  </div>
                  <div v-if="videoUploadStatus === 2" class="videoAnalyze">
                    <div
                      style="position: absolute;z-index: 1200;margin-top: 5px;margin-left: 5px;}"
                    >
                      <el-button
                        :disabled="readonly"
                        type="danger"
                        size="mini"
                        icon="el-icon-delete"
                        plain
                        @click="deleteVideo()"
                        >删除</el-button
                      >
                    </div>
                    <my-video
                      ref="video"
                      :sources="video.sources"
                      :options="video.options"
                    />
                  </div>
                </el-form-item>
                <el-form-item label="方法技巧">
                  <myEdit :disabled="readonly" v-model="question.method" />
                </el-form-item>
              </div>
              <el-form-item label="难易程度">
                <el-rate
                  :disabled="readonly"
                  v-model="question.difficultyLevel"
                />
              </el-form-item>
              <el-form-item label="相关知识点">
                <draggable
                  :disabled="readonly"
                  v-model="knowledgePoints"
                  style="display: inline-block"
                >
                  <el-tag
                    v-for="knowledgePoint in knowledgePoints"
                    :key="knowledgePoint.id"
                    :closable="!readonly"
                    @close="handleClose(knowledgePoint)"
                    >{{ knowledgePoint.name }}</el-tag
                  >
                </draggable>
                <el-button
                  v-if="!readonly"
                  class="button-new-tag"
                  size="small"
                  @click="open()"
                  >+ New</el-button
                >
              </el-form-item>
              <!-- <el-form-item v-else label="相关知识点">
                <el-tag type="warning">暂存题目后方可添加知识点</el-tag>
              </el-form-item> -->
            </el-form>
          </div>
        </el-card>
        <el-card
          v-if="
            question.type === '4' ||
            question.type === '8' ||
            question.type === '9' ||
            question.type === '10'
          "
          class="box-card"
        >
          <div slot="header" class="clearfix">
            <el-row :gutter="20">
              <el-col :span="20" class="cardHeader">
                <span> 子题目 </span>
              </el-col>
            </el-row>
          </div>
          <draggable
            :disabled="readonly"
            v-model="sonQuestions"
            @update="updateSortQuestion"
          >
            <el-card
              v-for="(sonQuestion, index) in sonQuestions"
              :key="sonQuestion.id"
              class="questionItem"
            >
              <el-row>
                <el-col :span="1">题目:</el-col>
                <el-col :span="1">{{ index + 1 }}</el-col>
                <el-col :span="1" class="fg">|</el-col>
                <el-col :span="10">
                  <span class="questionTitle" v-html="sonQuestion.title" />
                </el-col>
                <el-col :span="2">
                  <el-tag effect="dark" size="mini">{{
                    questionType[sonQuestion.type]
                  }}</el-tag>
                </el-col>
                <el-col :span="1" class="fg">|</el-col>
                <el-col :span="2">
                  <el-tag :type="sonQuestion | tag" size="mini">{{
                    sonQuestion | status
                  }}</el-tag>
                </el-col>
                <el-col :span="1" class="fg">|</el-col>
                <el-col :span="2">
                  <el-link
                    icon="el-icon-edit"
                    @click="sonQuestionInfo(sonQuestion.id)"
                    >查看</el-link
                  >
                </el-col>
              </el-row>
            </el-card>
          </draggable>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="phoneShow">
          <div class="phoneContent">
            <phone
              :question="questionShow"
              :parent-question="parentQuestionShow"
              :knowledge-points="knowledgePoints"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Sticky from "@/components/Sticky";
import myVideo from "@/components/video/myVideo";
import draggable from "vuedraggable";
import phone from "@/components/phone";
import myEdit from "@/components/myEdit";
import SelectTeacher from "../test/components/SelectTeacher";
import Msg from "../test/components/Msg";
import { getTeacher, getTeacherSubject } from "@/api/teacher.js";
import { addQuestionToTest, getquestionScore } from "@/api/test.js";
import {
  searchPoint,
  queryQuestionPoint,
  saveQuestionPoint,
  deleteQuestionPoint,
  questionPointSort,
  knowledgePointExceedLimit,
} from "@/api/point.js";
import {
  questionList,
  questionInfo,
  questionSort,
  searchQuestionList,
  checkingQuestion,
  queryUpAndDown,
} from "@/api/question.js";
import katex from "@/components/phone/katex";
import { getAreaList } from "@/api/area.js";
import { getSubjectTypeList, getSubjectList } from "@/api/subjectType.js";
import { getTestTypeList } from "@/api/testType.js";
export default {
  name: "QuestionInfo",
  components: {
    Sticky,
    myVideo,
    draggable,
    phone,
    myEdit,
    SelectTeacher,
    katex,
    Msg,
  },
  filters: {
    tag(row) {
      if (row.status === 1) {
        return "success";
      }
      if (row.editStatus !== 1) {
        return "info";
      }
      if (row.checkStatus !== 1) {
        return "warning";
      }
      if (row.reviewStatus === 1) {
        return "success";
      }
      return "";
    },
    status(row) {
      if (row.status === 1) {
        return "上线";
      }
      if (row.status === 0) {
        return "编辑中";
      }
      if (row.status == 3) {
        return "校验中";
      }
      if (row.status == 4) {
        return "审核中";
      }
      if (row.status == 5) {
        return "已审核";
      }
      return "下线";
    },
  },
  data() {
    return {
      status: true,
      testQuestionIdList: [],
      updateVisible: false,
      rules: {
        title: [{ required: true, message: "题目名称必填", trigger: "blur" }],
        subjectId: [{ required: true, message: "科目必填" }],
      },
      updateQusestions: [
        {
          operation: "1",
          changePosition: "题目",
          changeType: "2",
          oldContent: "",
          newContent: "",
        },
      ],
      initknowledgePoint: true,
      isknowledgePoint: false,
      loading: false,
      testType: [],
      subjectTypes: [],
      areaList: [],
      schoolSections: [],
      questionShow: {},
      parentQuestionShow: {},
      editContent: "",
      loading: false,
      point: "",
      subjects: [],
      teacher: [],
      teacherSubject: [],
      knowledgePointQuery: {},
      knowledgePointList: [],
      knowledgePoints: [],
      radio: "1",
      sonQuestions: [],
      qPoint: "",
      dialogFormVisible: false,
      video: {
        sources: [],
        options: {
          autoplay: false,
          poster: "",
        },
      },
      videoUploadStatus: 0,
      percentage: 0,
      selectAnswer: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      questionType: {
        1: "单选题",
        2: "多选题",
        3: "判断题",
        4: "情景题",
        5: "简答题",
        6: "辨析题",
        7: "填空",
        8: "完形填空",
        9: "阅读理解",
        10: "背景题",
      },
      newSelect: {
        select: "",
        content: "",
      },
      test: {
        id: null,
      },
      isEdit: false,
      parentQuestion: {
        id: null,
        title: "",
      },
      beSimilarQuestion: [],
      question: {
        id: null,
        testStructure: "",
        select: [
          {
            select: "A",
            content: "",
          },
          {
            select: "B",
            content: "",
          },
          {
            select: "C",
            content: "",
          },
          {
            select: "D",
            content: "",
          },
        ],
        answer: [],
        score: 1,
        type: "1",
        title: "",
        videoAnalyze: "",
        analyze: "",
        difficultyLevel: 1,
        questionType: 1,
        isOfficialQuestion: 0,
        officialQuestionSource: "",
        year: "",
        subjectId: "",
      },
      batchNo: "",
      questionChangeLogId: undefined,
      search: true,
      questionUpAndDown: {
        up: undefined,
        down: undefined,
      },
      questionUpDisabled: true,
      questionDownDisabled: true,
    };
  },
  computed: {
    selectNotUse() {
      const arr = this.selectAnswer.filter((item) => {
        const x = this.question.select.find((s) => s.select === item);
        return !x;
      });
      return arr;
    },
    typeName() {
      return this.questionType[this.question.type];
    },
    readonly: function () {
      return (
        (!this.isEdit || this.question.readonly) && this.question.id != null
      );
    },
  },
  created() {
    if (this.$router.currentRoute.query) {
      this.question.id = this.$router.currentRoute.query.questionId;
      this.sampleId = this.$router.currentRoute.query.id;
      this.status = this.$router.currentRoute.query.status;
      this.batchNo = this.$router.currentRoute.query.batchNo;
      this.isSample = this.$router.currentRoute.query.isSample;
    }
    this.getSubject();
    this.questionInfo();
    this.getArea();
    this.getTestType();
    this.getSubjectType();
    this.getSchoolSections();
    this.getQuestionUpAndDown();
  },
  watch: {
    question: {
      handler(newValue, old) {
        this.questionShow = this.question;
        this.parentQuestionShow = this.parentQuestion;
      },
      deep: true,
    },
    parentQuestion: {
      handler(newValue, old) {
        this.parentQuestionShow = this.parentQuestion;
      },
      deep: true,
    },
  },
  methods: {
    checking(status) {
      checkingQuestion(this.sampleId, status).then((res) => {
        this.status = false;
      });
    },
    showQuestion(id) {
      this.question.id = id;
      this.parentQuestion = {
        id: null,
        title: "",
      };
      this.questionInfo();
    },
    show(id) {
      questionInfo(id).then((res) => {
        const data = res.data;
        if (data.answer) {
          data.answer = JSON.parse(data.answer);
        }
        this.questionShow = data;
        if (this.questionShow.parentId !== 0) {
          questionInfo(this.questionShow.parentId).then((item) => {
            this.parentQuestionShow = item.data;
          });
        }
      });
    },

    sonQuestionInfo(id) {
      this.question.id = id;
      this.questionInfo();
    },
    goBack() {
      this.question = {
        id: this.parentQuestion.id,
      };
      this.parentQuestion = {
        id: null,
        title: "",
      };
      this.questionInfo();
    },
    questionInfo() {
      const id = this.question.id || this.$router.currentRoute.query.id;
      if (id) {
        this.question.id = id;
        questionList({
          parentId: id,
          sort: "asc_q.sort",
          pageNo: 1,
          pageSize: 40,
        }).then((res) => {
          this.sonQuestions = res.data;
        });
        questionInfo(id).then((res) => {
          const data = res.data;
          if (data.answer) {
            data.answer = JSON.parse(data.answer);
          }
          const score = this.question.score;
          this.question = res.data;
          if (!this.question.score) {
            this.question.score = score;
          }
          if (this.question.checkPeople === 0) {
            this.question.checkPeople = null;
          }
          if (this.question.reviewPeople === 0) {
            this.question.reviewPeople = null;
          }
          this.question.type = this.question.type + "";
          if (this.question.videoAnalyze) {
            this.videoUploadStatus = 2;
            this.video.sources.push({
              src: this.question.videoAnalyze,
              type: "video/mp4",
            });
          }
          if (this.question.year) {
            this.question.year = this.question.year + "";
          }
          if (this.question.questionType === 2) {
            questionInfo(this.question.parentId).then((res) => {
              this.parentQuestion = res.data;
            });
          }
          this.queryQuestionPoint();
        });
      }
    },
    queryQuestionPoint() {
      queryQuestionPoint(this.question.id).then((res) => {
        this.knowledgePoints = res.data;
      });
    },
    handleAnswer() {
      this.question.answer = this.question.answer.filter((item) =>
        this.question.select.find((s) => s.select === item)
      );
    },
    getSubject() {
      getSubjectList().then((res) => {
        this.subjects = res.data;
        if (!this.question.subjectId) {
          this.$nextTick(() => {
            let subjects = this.$store.getters.subjects;
            if (subjects && subjects instanceof Array && subjects.length > 0) {
              this.question.subjectId = subjects[0];
            } else {
              this.question.subjectId = parseInt(
                localStorage.getItem("question_subject")
              );
            }
          });
        }
      });
    },
    getArea() {
      getAreaList().then((res) => (this.areaList = this.getTreeData(res.data)));
    },


    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    questionUp() {
      if (this.questionUpAndDown.up) {
       let up = this.questionUpAndDown.up;
        this.$router.push({
          path: "/spotCheck/questionInfo",
          query: {
            id: up.id,
            questionId: up.questionId,
            status: up.status == 0,
            batchNo: up.batchNo,
            isSample:up.isSample
          },
        });
      }
    },
    questionDown() {
      if (this.questionUpAndDown.down) {
        let down=this.questionUpAndDown.down
        this.$router.push({
          path: "/spotCheck/questionInfo",
          query: {
            id: down.id,
            questionId: down.questionId,
            status: down.status == 0,
            batchNo: down.batchNo,
            isSample:down.isSample
          },
        });
      }
    },
    getQuestionUpAndDown() {
      queryUpAndDown(this.batchNo, this.sampleId).then((res) => {
        this.questionUpAndDown = res.data;
        if (this.questionUpAndDown.up) {
          this.questionUpDisabled = false;
        }
        if (this.questionUpAndDown.down) {
          this.questionDownDisabled = false;
        }
      });
    },
  },
};
</script>
<style>
.sticky {
  height: 80px;
  background-color: #f2f6fc;
}
.questionItem {
  margin-top: 5px;
}
.questionItem .el-card__body {
  padding: 12px;
}
.questionTitle p {
  margin: 0px;
}
.likeQuestion p {
  margin: 0px;
}
</style>
<style scoped>
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.videoAnalyze {
  width: 70%;
}
.phoneShow {
  width: 400px;
  margin-top: 25px;
  position: fixed;
}
.el-rate {
  height: 40px;
  line-height: 50px;
}
.knowledgePointForm {
  margin-top: 25px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.progress {
  margin-top: 10px;
}
.box-card {
  width: 90%;
  margin-left: 5%;
  margin-top: 25px;
  margin-bottom: 25px;
}

.testItem {
  font-size: 12px;
  /* margin-left: 2%; */
  line-height: 40px;
  display: flex;
  align-items: center;
}

.testItemContent {
  margin-left: 10px;
}

.testName {
  font-size: 18px;
  margin-left: 10px;
}
.content {
  margin-bottom: 60px;
}
.phoneContent {
  margin: 0px auto;
  width: 320px;
}

.testTitleCol {
  display: flex;
  padding-left: 12px;
  padding-right: 12px;
  justify-content: space-around;
}

.testTitleContent {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.testTitleLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
